<template>
  <PageWrapper>

    <CollapseContainer title="日志检索">
      <BasicForm @register="register1" />
    </CollapseContainer>

    <BasicTable @register="registerTable" class="mt-4">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <TableAction
              :actions="[
              {
                label: '删除',
                icon: 'ic:outline-delete-outline',
                onClick: handleDelete.bind(null, record),
              },
            ]"
              :dropDownActions="[
              {
                label: '启用',
                popConfirm: {
                  title: '是否启用？',
                  confirm: handleOpen.bind(null, record),
                },
              },
            ]"
            />
          </template>
        </template>
      </BasicTable>

  </PageWrapper>
</template>
<script lang="ts" setup>
import { BasicForm, FormSchema, useForm } from '@/components/Form';
import { CollapseContainer } from '@/components/Container';
import { PageWrapper } from '@/components/Page';

// 自定义组件名称, 默认为文件名
defineOptions({ name: 'Logs' });

const getSchamas = (): FormSchema[] => {
  return [
    {
      field: 'level',
      component: 'Select',
      label: '日志级别',
      colProps: {
        span: 4,
      },
      labelWidth: 80,
      componentProps: {
        options: [
          {
            label: 'INFO',
            value: 'INFO',
            key: 'INFO',
          },
          {
            label: 'WARN',
            value: 'WARN',
            key: 'WARN',
          },
          {
            label: 'ERROR',
            value: 'ERROR',
            key: 'ERROR',
          },
        ],
      },
    },
    {
      field: 'keys',
      component: 'Input',
      label: '关键字',
      colProps: {
        span: 5,
      },
      labelWidth: 80,
      componentProps: {
        placeholder: '多个关键字使用,分割',
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: '[startDate, endDate]',
      label: '日期范围',
      component: 'RangePicker',
      componentProps: {
        format: 'YYYY-MM-DD HH:mm:ss',
        placeholder: ['开始时间', '结束时间'],
        showTime: { format: 'HH:mm:ss' },
      },
      colProps: {
        span: 8,
      },
      labelWidth: 80,
    },
  ];
};


const [register1] = useForm({
  labelWidth: 120,
  schemas: [
    ...getSchamas(),
  ],
  actionColOptions: {
    span: 24,
  },
  compact: true,
  showAdvancedButton: false,
  alwaysShowLines: 2,
});

import { BasicTable, useTable, BasicColumn, TableAction } from '@/components/Table';

import { demoListApi } from '@/api/demo/table';

const columns: BasicColumn[] = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 280,
  },
  {
    title: '姓名',
    dataIndex: 'name',
    width: 260,
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '编号',
    dataIndex: 'no',
    width: 300,
  },
  {
    title: '开始时间',
    width: 200,
    dataIndex: 'beginTime',
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    width: 200,
  },
];

const [registerTable] = useTable({
  api: demoListApi,
  columns: columns,
  rowSelection: { type: 'radio' },
  bordered: true,
  actionColumn: {
    width: 160,
    title: 'Action',
    dataIndex: 'action',
  },
});
function handleDelete(record: Recordable) {
  console.log('点击了删除', record);
}
function handleOpen(record: Recordable) {
  console.log('点击了启用', record);
}

</script>
